<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #container {
            position: relative;
            height: 500px;

            width: 600px;
            margin: 30px auto;
        }

        input[type='text'] {
            width: 540px;
            padding-left: 60px;
            position: absolute;
            top: 80px;
            height: 60px;
            /* border: none; */
            outline: none;
        }

        .bar {
            position: absolute;
            font-weight: bolder;
            font-size: 30px;
            width: 100%;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background-color: #CCCCCC;

        }

        table {
            position: absolute;
            top: 162px;
            width: 600px;
            /* height: 200px; */
            border-collapse: collapse;
            border: 1px solid #1e1e1e;
        }

        tr {
            width: 600px;
        }

        tr>th,
        tr>td {
            width: 200px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #1e1e1e;

        }

        #last {
            width: 600px;
            height: 80px;
        }

        table tbody #last .td {
            width: 200px;
            height: 80px;
        }

        table tbody #last .td div {
            color: #f00;
            font-size: 30px;

        }
    </style>
</head>

<body>
    <div id="container">
        <div class="bar">商品信息查询</div>
        <input type="text" name="" id="" placeholder="搜索商品">
        <table>
            <thead>
                <tr>
                    <th>名称</th>
                    <th>价格</th>
                    <th>库存</th>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>
                <tr align="center">
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>
                <tr align="center">
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>
                <tr align="center">
                    <td>你好</td>
                    <td>你好</td>
                    <td>你好</td>
                </tr>

            </tbody>
        </table>
    </div>

    <script>

        let data = [
            {
                vegetable: '白菜',
                salary: '10元/斤',
                weight: '1000斤'
            },
            {
                vegetable: '青菜',
                salary: '6元/斤',
                weight: '900斤'
            },
            {
                vegetable: '花菜',
                salary: '5元/斤',
                weight: '700斤'
            },
            {
                vegetable: '土豆',
                salary: '26元/斤',
                weight: '600斤'
            },
            {
                vegetable: '荷兰豆',
                salary: '2元/斤',
                weight: '500斤'
            },
            {
                vegetable: '豆角',
                salary: '16元/斤',
                weight: '400斤'
            },
            {
                vegetable: '花椰菜',
                salary: '41元/斤',
                weight: '300斤'
            },
            {
                vegetable: '四季豆',
                salary: '16元/斤',
                weight: '300斤'
            },
            {
                vegetable: '地瓜',
                salary: '1元/斤',
                weight: '300斤'
            },
            {
                vegetable: '哈密瓜',
                salary: '22元/斤',
                weight: '300斤'
            },
            {
                vegetable: '苦瓜',
                salary: '16元/斤',
                weight: '300斤'
            },
            {
                vegetable: '西瓜',
                salary: '25元/斤',
                weight: '300斤'
            },
        ]
        let tbody = document.querySelector('tbody');
        let inputElement = document.querySelector('input');
        let str = '';
        let newData = data.forEach(function (item) {
            str += `  <tr  align="center">
            <td>${item.vegetable}</td>
            <td>${item.salary}</td>
            <td>${item.weight}</td>
        </tr>`;
        });

        tbody.innerHTML = str;
        let secondData = null;

        let  debounce = callback => {/* 防抖函数 */
            var  delayer = null;
            return () => {
                clearTimeout(delayer);
                delayer = setTimeout(() => {
                    if (typeof callback == 'function') callback();
                }, 500);
            }
        }



        inputElement.oninput = debounce(() => {
            console.log(inputElement.value);
            secondData = data.filter(function (item) {

                return item.vegetable.indexOf(inputElement.value) > -1;
            })
            let res = data.some(item => {
                if (item.vegetable.indexOf(inputElement.value) > -1) {
                    return true;
                } else {
                    return false;
                }
            })

            let newStr = '';
            console.log(secondData);
            if (res) {

                secondData.forEach(function (item) {
                    newStr += `  <tr  align="center">
                    <td>${item.vegetable}</td>
                    <td>${item.salary}</td>
                    <td>${item.weight}</td>
                    </tr>`;
                })
                tbody.innerHTML = newStr;
            } else {
                newStr += `<tr id="last" align="center">
                    <td class="td" colspan="3"><div id="td">暂无数据，请输入其它关键词试试~~</div>
                        </td></tr>`;
                tbody.innerHTML = newStr;

            }


        })
        
     
     







    </script>
</body>

</html>